'use strict'
import React, { createClass, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router'
import $ from 'jquery'

import CategoryList from '../components/category/CategoryList';
import CategoryNavbar from '../components/category/CategoryNavbar';

import Header from "../components/common/Header";
import Footer from '../components/common/Footer';


import { setExchangeModalData, setGlobalData } from '../actions';

import '../../asset/css/product.css';



const ProductCategory = withRouter(createClass({
    getInitialState() {
        return {
            loading: true,
            error: null,
            data: null,
            bodyBgClr: '#e6e6e6',


            categorys : null,
            navbarTop:'44px',
            navIndex:0


        }
    },

    handleClick : (_this,index) => {


        if(index == 0){
            _this.setState({navbarTop:'44px'});
        }

        let element = document.getElementById('category'+index);
        if(element) {

            element.scrollIntoView();
        }

        _this.setState({navIndex:index});

    },

    componentDidMount() {
        //$('body').css('backgroundColor', this.state.bodyBgClr);
        var me = this;
        $.ajax({
            url: '../webapp/data/category.json',
            type: 'GET',
            dataType: 'JSON',
            success: function (resp) {
                me.setState({loading: false, categorys: resp});
            }
        });

        //window.addEventListener('scroll', this.handleScroll.bind(this));

    },

    handleScroll(e){
        let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度
        let scrollHeight = this.refs.bodyBox.scrollHeight; //滚动内容高度
        let scrollTop  = this.refs.bodyBox.scrollTop;  //滚动条滚动高度

        //console.log(this)


        //if((clientHeight+scrollTop)==(scrollHeight)){ //如果滚动到底部 }


        // console.log("clientHeight:"+clientHeight);
        // console.log("scrollTop:"+scrollTop);
        //console.log("scrollHeight"+scrollHeight);


        if(scrollTop > 43){
            this.setState({navbarTop:'0px'});
        }else{
            this.setState({navbarTop:(44-scrollTop)+'px'});
        }

        this.setState({scrollTop:scrollTop});


        var _this = this;

        this.state.categorys.map(function(item,index){

            var offsetTop = document.getElementById('category'+index).offsetTop;

            if(offsetTop - scrollTop <=5){
                _this.setState({navIndex:index});
            }

        })

    },



    render() {
        if (this.state.loading) {
            return <div className="loading">努力加载中...</div>
        }
        else if (this.state.categorys) {
            let goodList = this.state.categorys;
            const { goodData, globalData, setGlobalData, setExchangeModalData } = this.props;
            let points = globalData ? globalData.points : null;
            let navbarTop = this.state.navbarTop;
            let _this = this;

            return (

                <div className="page-category">
                    <div className="page-category-wrap" onScroll={this.handleScroll} ref="bodyBox">
                        <Header title="商品分类"/>
                        <CategoryList datas={this.state.categorys} />

                    </div>


                    <div className="list-navbar" style={{top: navbarTop, bottom: '46px'}}>
                        <ul>

                            {
                                this.state.categorys.map(function(item,index){
                                    var active =  index == _this.state.navIndex?'active':'';
                                    return  <li className={active} onClick={()=>_this.handleClick(_this,index)} ref="navbar"><span>{item.name}</span></li>

                                })
                            }

                        </ul>
                    </div>



                    <Footer/>

                </div>
            )
        }
        else {
            return <div>服务器响应错误</div>
        }
    }
}));

const mapStateToProps = (state) => {
    return {
        goodData: state.goodList,
        globalData: state.globalData
    }
};

export default connect(mapStateToProps, {setExchangeModalData, setGlobalData})(ProductCategory);